import React, { FC, useState } from 'react';
import { Select, Button, Card, Table, Input } from 'antd';

const { Option } = Select;

const SchoolInfoAudit: FC = () => {
  const years = ['2023', '2022', '2021', '2020'];
  const [selectedYear, setSelectedYear] = useState<string | undefined>(undefined);

  const handleYearChange = (value: string) => {
    setSelectedYear(value);
  };

  const handleExport = () => {
    if (selectedYear) {
      alert(`导出 ${selectedYear} 年的数据`);
    } else {
      alert('请先选择年份');
    }
  };

  const handleSaveAndSubmit = () => {
    alert('保存并提交成功');
  };

  // 教学及辅助用房表格数据
  const dataSource = [
    { key: '1', roomType: '普通教室' },
    { key: '2', roomType: '专业教室' },
    { key: '3', roomType: '公共活动及重复用房' },
    { key: '4', roomType: '图书阅览室' },
  ];

  const columns = [
    {
      title: '教学及辅助用房',
      dataIndex: 'roomType',
      key: 'roomType',
      render: (text: string) => <strong>{text}</strong>,
    },
    {
      title: '本学期校舍建筑面积(m)：',
      dataIndex: 'currentArea',
      key: 'currentArea',
      render: () => <Input placeholder="请输入面积" style={{ width: '100%' }} />,
    },
    {
      title: '上学期校舍建筑面积(m)：',
      dataIndex: 'lastArea',
      key: 'lastArea',
      render: () => <Input placeholder="请输入面积" style={{ width: '100%' }} />,
    },
    {
      title: '较上学年增加面积(m)：',
      dataIndex: 'increaseArea',
      key: 'increaseArea',
      render: () => <Input placeholder="请输入增加面积" style={{ width: '100%' }} />,
    },
    {
      title: '较上学年减少面积(m)：',
      dataIndex: 'decreaseArea',
      key: 'decreaseArea',
      render: () => <Input placeholder="请输入减少面积" style={{ width: '100%' }} />,
    },
  ];

  // 行政办公用房表格数据
  const adminDataSource = [
    { key: '1', roomType: '教师办公室' },
    { key: '2', roomType: '其他' },
  ];

  const adminColumns = [
    {
      title: '行政办公用房',
      dataIndex: 'roomType',
      key: 'roomType',
      render: (text: string) => <strong>{text}</strong>,
    },
    {
      title: '本学期校舍建筑面积(m)：',
      dataIndex: 'currentArea',
      key: 'currentArea',
      render: () => <Input placeholder="请输入面积" style={{ width: '100%' }} />,
    },
    {
      title: '上学期校舍建筑面积(m)：',
      dataIndex: 'lastArea',
      key: 'lastArea',
      render: () => <Input placeholder="请输入面积" style={{ width: '100%' }} />,
    },
    {
      title: '较上学年增加面积(m)：',
      dataIndex: 'increaseArea',
      key: 'increaseArea',
      render: () => <Input placeholder="请输入增加面积" style={{ width: '100%' }} />,
    },
    {
      title: '较上学年减少面积(m)：',
      dataIndex: 'decreaseArea',
      key: 'decreaseArea',
      render: () => <Input placeholder="请输入减少面积" style={{ width: '100%' }} />,
    },
  ];

  // 生活用房表格数据
  const livingDataSource = [
    { key: '1', roomType: '学生宿舍' },
    { key: '2', roomType: '学生食堂' },
  ];

  const livingColumns = [
    {
      title: '生活用房',
      dataIndex: 'roomType',
      key: 'roomType',
      render: (text: string) => <strong>{text}</strong>,
    },
    {
      title: '本学期校舍建筑面积(m)：',
      dataIndex: 'currentArea',
      key: 'currentArea',
      render: () => <Input placeholder="请输入面积" style={{ width: '100%' }} />,
    },
    {
      title: '上学期校舍建筑面积(m)：',
      dataIndex: 'lastArea',
      key: 'lastArea',
      render: () => <Input placeholder="请输入面积" style={{ width: '100%' }} />,
    },
    {
      title: '较上学年增加面积(m)：',
      dataIndex: 'increaseArea',
      key: 'increaseArea',
      render: () => <Input placeholder="请输入增加面积" style={{ width: '100%' }} />,
    },
    {
      title: '较上学年减少面积(m)：',
      dataIndex: 'decreaseArea',
      key: 'decreaseArea',
      render: () => <Input placeholder="请输入减少面积" style={{ width: '100%' }} />,
    },
  ];

  return (
    <div>
      <div
        style={{
          backgroundColor: 'white',
          padding: '10px 20px',
          borderRadius: '8px',
          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
          marginBottom: '20px',
          fontSize: '20px',
          fontWeight: 'bold',
        }}
      >
        校舍管理
      </div>
      <Card
        style={{
          borderRadius: '8px',
          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
        }}
      >
        <div className="select" style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '20px' }}>
          <Select placeholder="选择年份" style={{ width: 120 }} value={selectedYear} onChange={handleYearChange}>
            {years.map(year => (
              <Option key={year} value={year}>
                {year} 年
              </Option>
            ))}
          </Select>
          <Button type="primary" onClick={handleExport}>
            导出
          </Button>
        </div>

        {/* 教学及辅助用房表格部分 */}
        <Table dataSource={dataSource} columns={columns} pagination={false} style={{ marginTop: '20px' }} />

        {/* 行政办公用房表格部分 */}
        <Table dataSource={adminDataSource} columns={adminColumns} pagination={false} style={{ marginTop: '20px' }} />

        {/* 生活用房表格部分 */}
        <Table dataSource={livingDataSource} columns={livingColumns} pagination={false} style={{ marginTop: '20px' }} />

        {/* 添加保存并提交按钮 */}
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '20px' }}>
          <Button type="primary" onClick={handleSaveAndSubmit}>
            保存并提交
          </Button>
        </div>
      </Card>
    </div>
  );
};

export default SchoolInfoAudit;
